<template>
<!--index.wxml-->
<index-skeleton v-if="loadingskelet"></index-skeleton>
<view v-else>
	<view class="hotel-query">
	  <!-- 轮播图banner -->
	  <swiper :autoplay="autoplay" :interval="interval" :duration="duration" class="swiper-box">
		<block v-for="(item, index) in swiperImgs" :key="index">
		  <swiper-item>
			<image :src="item.imgUrl" class="slide-image"></image>
		  </swiper-item>
		</block>
	  </swiper>
	  <!-- 搜索框 -->
	  <view class="search-box">
		<view class="search-item" @click="onShowDatePicker('range',range)">
		  <!-- 入住 -->
		  <view class="date-item" hover-class="hover-class">
			<text>{{range[0].mouth}}月{{range[0].day}}日</text>
			<view class="check-info">
			  <view>周{{range[0].week}}</view>
			  <view>入住</view>
			</view>
		  </view>
		  <!-- 入住天数 -->
		  <view class="date-item">
			<view class="check-days">
			  <image src="/static/images/icon/icon_moon.png" class="check-moon"></image>
			  <text>共{{timeFn(range[0].year+'/'+range[0].mouth+'/'+range[0].day,range[1].year+'/'+range[1].mouth+'/'+range[1].day)}}晚</text>
			</view>
		  </view>
		  <!-- 离店 -->
		  <view class="date-item" hover-class="hover-class">
			  <view class="check-info">
				<view>周{{range[1].week}}</view>
				<view>离店</view>
			  </view>
			<text>{{range[1].mouth}}月{{range[1].day}}日</text>
		  </view>
		</view>
		
	  </view>
	  <!-- 功能入口 -->
	  <view class="func-entrance">
		<view v-for="(item, index) in funcEntrances" :key="index" class="func-item" hover-class="hover-class" @tap="ceshi(1)">
		  <image :src="item.icon" class="func-icon" :mode="imgMode"></image>
		  <view class="func-text">
			<text>{{item.text}}</text>
		  </view>
		</view>
	  </view>
	  <!-- 酒店预订 -->
	  <view class="hotel-reservation">
		<view class="reservation-title">
		  <text>房间预订 · RESERVATION</text>
		</view>
		<!-- 酒店列表 -->
		<view v-for="(item, index) in hotelList" :key="index" class="hotel-list" @tap="orderpage(item.id)">
		  <image class="hotel-pic" :src="item.hotelPic"></image>
		  <view class="hotel-info">
			<view class="hotel-name">
			  <text>{{item.hotelName}}</text>
			</view>
			<view>
			  <text class="hotel-score">{{item.hotelScore}}分</text>
			  <text class="hotel-star">{{filter.lowerToUpper(item.hotelStar)}}星级</text>
			</view>
			<view class="hotel-position">
			  <text class="hotel-distance">{{item.hotelDistance}}km</text>
			  <text class="hotel-addr">{{item.hotelAddr == "" ? "":" · "}}{{item.hotelAddr}}</text>
			</view>
			<view>
			  <text v-for="(tmp, index2) in item.hotelFeatures" :key="index2" class="hotel-feature">{{tmp}}</text>
			</view>
			<view class="hotel-price">
			  ¥
			  <text class="price-num"> {{item.hotelPrice}} </text>起
			</view>
		  </view>
		</view>
	  </view>
	  <mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
	</view>

	<view v-show="orderpageshow" class="orderpage" @touchmove.stop = "">
		  <order-page :animation="animationData" :data="roomdata" :orderbtn="true" class="order"/>
		  <view  @click="orderclose" class="ordertop"></view>
	</view>

</view>

</template>

<script module="filter" lang="wxs" src="../../filter/filters.wxs"></script>

<script>
//index.js
//获取应用实例
const app = getApp().globalData;
import IndexSkeleton from "@/pages/hotelhome/skelet/index-skeleton.vue"
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
import orderPage from "@/components/orderPage/orderPage.vue";
import {_getRoomList} from '../../common/vmeitime-http/roommsg.js'
let store =require("../utils/store.js")
// import {Room} from '@/api/room.js'
export default {
  data() {
    return {
	  loadingskelet:true, //骨架屏标识
      orderpageshow:false,
      animationData: {},
      showPicker:false,
	  range: [
			{
			year:"",
			mouth:"",
			day:"",
			week:"",
		},
		{
			year:"",
			mouth:"",
			day:"",
			week:"",
		}
		],
	  type: 'rangetime',
	  value: '',
      autoplay: true,
      interval: 3000,
      duration: 1000,
      imgMode: 'aspectFit',
      keyWordDisabled: true,
      priceStarDisabled: true,
      today: '',
      searchCondition: {
        address: '贵阳',
        checkIn: '',
        checkOut: ''
      },
      swiperImgs: [{
        imgUrl: "/static/images/index/ad_pic1.png",
        toUrl: ''
      }, {
        imgUrl: "/static/images/index/ad_pic1.png",
        toUrl: ''
      }],
      funcEntrances: [{
        icon: "/static/images/icon/icon_rights.png",
        text: '会员权益'
      }, {
        icon: "/static/images/icon/icon_clock.png",
        text: '十元抢房'
      }, {
        icon: "/static/images/icon/icon_hour.png",
        text: '钟点房'
      }],
	  roomdata:null,
      hotelList: [],
      checkIn: "",
      checkOut: "",
	  dataPickerValue: [new Date(new Date().getTime() - 1 * 60 * 60 * 1000), new Date()]
    };
  },

  components: {
	  MxDatePicker,
	  orderPage,
	  IndexSkeleton
  },
  props: {},
  onUnload() {
        this.animationData = {}
        // 页面关闭后清空数据
      },
  onload(){
          this.animation = uni.createAnimation()  
          // 创建动画实例
					
					
					
      },

  /**
   * 页面显示
   */
  async onShow() {
    var app = getApp();
		
    console.log(app.globalData);
    let checkIn = 'searchCondition.checkIn',
        checkOut = 'searchCondition.checkOut';
		var time = new Date(+new Date(this.dataPickerValue[0])+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'').split("-")
	// this.range = [{year:time[0],mouth:time[1],day:time[2].split(' ')[0],week:this.dataChange(time[0],time[1],time[2].split(' ')[0])},{year:time[0],mouth:time[1],day:~~(time[2].split(' ')[0])+1,week:this.dataChange(time[0],time[1],~~(time[2].split(' ')[0])+1)}];
	this.range = store.getItem("day");

	store.setItem("day",this.range)
	this.roomlistrequest()
  },
 
  methods: {
		ceshi(a){
			console.log(a)
			// http.get(Room+a).then(res => {
			// 			console.log(res)
			// 			})
		},
		async roomlistrequest(){
			var roomlist = {};
			var range = store.getItem("day")
			var daya = range[0].year+"-"+range[0].mouth+"-"+range[0].day;
			var dayb = range[1].year+"-"+range[1].mouth+"-"+range[1].day;
			roomlist = await _getRoomList({
			startTime:daya,
			endTime:dayb
			})
			this.roomlist(roomlist.data.data)
			console.log(roomlist.data.data)
		},
		roomlist(roomlist){
			for (var i = 0; i < roomlist.length; i++) {
				if(!roomlist[i].imageUri){
					roomlist[i].imageUri = "http://mss-shon.sankuai.com/v1/mss_745278b3c232430ebce6c9f550614edd/pmspublic/11_20200825162947.jpg"
				}
				if(roomlist.count != 0){
					this.hotelList.push({
						id:roomlist[i].id,
					  hotelName: roomlist[i].roomTypeName,
					  hotelPic: roomlist[i].imageUri.split("|")[0],
					  hotelScore: '4.7',
					  hotelStar: '3',
					  hotelAddr: roomlist[i].orgRoomTypeDescription || "",
					  hotelDistance: '18.0',
					  hotelPrice: roomlist[i].actualPrice,
					  hotelFeatures: ['含早餐', '无线网络', '免费停车']
					})
				}
			}
			console.log(roomlist[1])
			console.log(this.hotelList)
			
			// 骨架屏标识
			this.loadingskelet = false 
			
		},
	dataChange(year,month,date) {
	   var dt = new Date(year, month-1, date);     
	   var weekDay = ["日", "一", "二", "三", "四", "五", "六"];
	   return weekDay[dt.getDay()];
	},
	
	onShowDatePicker(type,range){//显示
		var date = [range[0].year+'/'+range[0].mouth+'/'+range[0].day,range[1].year+'/'+range[1].mouth+'/'+range[1].day]
		console.log(range)
		this.type = type;
		this.showPicker = true;
		this.value = date;
	},
	onSelected(e) {//选择
		this.showPicker = false;
		console.log(e)
		if(e) {
			var date1 = e.value[0].split("/")
			var date2 = e.value[1].split("/")
			this[this.type] = [{year:date1[0],mouth:date1[1],day:date1[2],week:this.dataChange(date1[0],date1[1],date1[2])},{year:date2[0],mouth:date2[1],day:date2[2],week:this.dataChange(date2[0],date2[1],date2[2])}] 
			//选择的值
			console.log('value => '+ e.value);
			store.setItem("day",this[this.type])
			this.roomlistrequest()
		}
	},
	timeFn(d1,d2) {//di作为一个变量传进来
	    //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
	    var dateBegin = new Date(d1.replace(/-/g, "/"));//将-转化为/，使用new Date
	    var dateEnd = new Date(d2.replace(/-/g, "/"));//获取当前时间
	    var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
	    var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
	    var leave1=dateDiff%(24*3600*1000)    //计算天数后剩余的毫秒数
	    var hours=Math.floor(leave1/(3600*1000))//计算出小时数
	    //计算相差分钟数
	    var leave2=leave1%(3600*1000)    //计算小时数后剩余的毫秒数
	    var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
	    //计算相差秒数
	    var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
	    var seconds=Math.round(leave3/1000)
			store.setItem("daytime",dayDiff)
		return dayDiff;
	    // console.log(" 相差 "+dayDiff+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒")
	    // console.log(dateDiff+"时间差的毫秒数",dayDiff+"计算出相差天数",leave1+"计算天数后剩余的毫秒数"
	    //     ,hours+"计算出小时数",minutes+"计算相差分钟数",seconds+"计算相差秒数");
	},
	orderpage(index){
		this.roomdata = index;
		this.orderpageshow = true;
		this.running()
	},
	 running() {
	    this.animation = uni.createAnimation()	
			
		setTimeout(()=>{
			this.animation.translateY(-300).step({duration:200})
			this.animationData = this.animation.export()
			// wx.hideTabBar({})
		}, 50);
	},
	orderclose(){
		// wx.showTabBar({
		// 	// animation:true
		// })
		setTimeout(()=>{
			this.orderpageshow = false;
		}, 50);
		
		this.animation.translateY(300).step({duration:200})
		this.animationData = this.animation.export()
		
	},
	bookpage(id,name,room){
		
		if(uni.getStorageSync("userInfo")){
			console.log(room)
			uni.navigateTo({
				url: '../hotelorder/order?id='+id+'&'+'name='+name+'&'+'price='+room.actualPrice+'&'+'roomtypeid='+room.roomTypeId,
			});
		}else{
			uni.navigateTo({
				url: '../public/login_choose',
			});
		}
		
	}
	

  }
};
</script>
<style>
@import "./index.css";
</style>